<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
        textarea{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>LZW 压缩算法</h1>
    <div><p>input <span id="sinfo"></span></p>
        <textarea name="" id="input" cols="30" rows="7">111111111111222222222222222223333333333333333344444444444444441111111111111121314234123241241567568679698-90-9=98675645646456464562342342424234252342244242</textarea>
    </div>
    <div>
        <div class="output">
            <p>output <input type="button" id="btn1" value="压缩"> <span id="o1"></span></p>
            <textarea name="" id="output1"  rows="7"></textarea>
        </div>
        <div class="output">
            <p>output <input type="button" id="btn2" value="解压"> <span id="o2"></span></p>
            <textarea name="" id="output2"  rows="7"></textarea>
        </div>
    </div>
    <script src="lzw.js"></script>
    <script>
        let input=document.getElementById("input")
        let btn1=document.getElementById("btn1");
        let btn2=document.getElementById("btn2");
        let output1=document.getElementById("output1")
        let output2=document.getElementById("output2")

        

        btn1.onclick=function(){
            let blob=new Blob([input.value]);
            document.getElementById("sinfo").innerText=`源字符串大小 ${blob.size}字节`
            blob.arrayBuffer().then(buff=>{
                let result= encoding(new Uint8Array(buff))
                output1.value=result.map(e=> (e>0xf?"":"0")+e.toString(16));
                document.getElementById("o1").innerText=`压缩后大小 ${result.length}字节`
            })            
        }
        btn2.onclick=function(){
            
            let arr= output1.value.split(",").map(e=>parseInt(e,16))
            arr=new Uint8Array(decoding(arr));
            let blob=new Blob([arr])
            
            document.getElementById("o2").innerText=`解压缩后大小 ${arr.length}字节`
            blob.text().then(text=>{
                output2.value = text
            })
        }
    </script>
</body>
</html>